<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
    <script type="text/javascript">
        $(function(){
            const app={
                data(){
                    return {
                        message:"JavaIsGood!"
                    }
                },
                computed: {
                    reversedMessage:function(){
                        return this.message.split('').reverse().join('')
                    }
                },
                  methods: {
                    reversedMessage2: function () {
                        return this.message.split('').reverse().join('')
                    }
                }
            }
            Vue.createApp(app).mount('#app')

            const app2 = {
                data(){
                    return{
                        message:'hahahahahaha'
                    }
                }
            }
            Vue.createApp(app2).mount('#app2')

            const app3 = {
              data() {
                return {
                  name: 'Google',
                  url: 'http://www.google.com'
                }
              },
              computed: {
                site: {
                  get: function () {
                    return this.name + ' ' + this.url
                  },
                  set: function (newValue) {
                    var names = newValue.split(' ')
                    this.name = names[0]
                    this.url = names[names.length - 1]
                  }
                }
              }
            }
            vm = Vue.createApp(app3).mount('#app3')

            console.log(vm.name+' '+vm.url)
            vm.name = "baidu"
            vm.url = "www.baidu.com"
        })
    </script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用 methods 计算后反转字符串:{{ reversedMessage2()  }}</p>
</div>

<div id="app2">
    {{ message.split('').reverse().join('') }}
</div>

<br>
<div id="app3">
    <p>{{name}}</p>
    <p>{{url}}</p>
</div>
</body>
</html>